<template>
  <div class="map-container">
    <div class="map-content"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import yunCountyMap from '@/assets/map/yunCountyMap.json'

export default {
  name: 'NurseryMap',
  props: {
    nurseries: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      mapChart: null,
      mapOptions: {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: params => {
            if (params.data) {
              return `${params.name}`
            }
            return params.name
          }

        },
        geo: {
          map: '云县',
          roam: true,
          zoom: 1.2,
          center: [100.125637, 24.439026],
          scaleLimit: {
            min: 1,
            max: 5
          },
          label: {
            show: true,
            color: '#333',
            fontSize: 12
          },
          itemStyle: {
            areaColor: '#e5ecf9',
            borderColor: '#409EFF',
            borderWidth: 1.5,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 10
          },
          emphasis: {
            itemStyle: {
              areaColor: '#cce0ff',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 20
            },
            label: {
              color: '#409EFF',
              fontSize: 14
            }
          }
        },
        series: [
          {
            name: '云县',
            type: 'map',
            map: '云县',
            geoIndex: 0,
            data: []
          },
          {
            name: '育苗基地',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: 40,
            label: {
              show: true,
              formatter: params => params.data.name,
              position: 'right',
              fontSize: 12,
              color: '#333'
            },
            itemStyle: {
              color: '#4CAF50',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                color: '#409EFF'
              }
            },
            tooltip: {
              formatter: params => {
                const data = params.data
                return `
                  <div>
                    <p><b>${data.name}</b></p>
                    <p>地址：${data.address}</p>
                    <p>海拔：${data.altitude}米</p>
                    <p>经度：${data.value[0].toFixed(6)}</p>
                    <p>纬度：${data.value[1].toFixed(6)}</p>
                  </div>
                `
              }
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    // 注册地图
    echarts.registerMap('云县', yunCountyMap)
    // 初始化地图
    this.initMap()
  },
  beforeDestroy() {
    // 销毁地图实例
    if (this.mapChart) {
      this.mapChart.dispose()
      this.mapChart = null
    }
  },
  watch: {
    nurseries: {
      handler: 'updateNurseryMarkers',
      deep: true
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      const mapContainer = this.$el.querySelector('.map-content')
      if (!mapContainer) return
      
      this.mapChart = echarts.init(mapContainer)
      this.mapChart.setOption(this.mapOptions)
      
      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        this.mapChart && this.mapChart.resize()
      })
    },
    
    // 更新育苗点标记
    updateNurseryMarkers() {
      if (!this.mapChart) return

      const markerData = this.nurseries.map(nursery => ({
        name: nursery.name,
        value: [nursery.longitude, nursery.latitude],
        nurseryId: nursery.id,
        address: nursery.address,
        altitude: nursery.altitude
      }))

      this.mapChart.setOption({
        series: [
          {
            name: '云县',
            type: 'map',
            map: '云县',
            geoIndex: 0,
            data: []
          },
          {
            name: '育苗基地',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: 40,
            label: {
              show: true,
              formatter: params => params.data.name,
              position: 'right',
              fontSize: 12,
              color: '#333'
            },
            itemStyle: {
              color: '#4CAF50',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                color: '#409EFF'
              }
            },
            tooltip: {
              formatter: params => {
                const data = params.data
                return `
                  <div>
                    <p><b>${data.name}</b></p>
                    <p>地址：${data.address}</p>
                    <p>海拔：${data.altitude}米</p>
                    <p>经度：${data.value[0].toFixed(6)}</p>
                    <p>纬度：${data.value[1].toFixed(6)}</p>
                  </div>
                `
              }
            },
            data: markerData
          }
        ]
      })

      // 注册点击事件
      this.mapChart.off('click')
      this.mapChart.on('click', params => {
        if (params.componentSubType === 'scatter' && params.data) {
          this.$emit('select', params.data.nurseryId)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);

  .map-content {
    width: 100%;
    height: 100%;
  }
}
</style> 